<template>
  <div class="container"> 
      <ul class="first">
        <li v-for="(value,index) in showData">
          <div class="title" @click="show(index,'first')">
            <span class="firstNumber">
              <span v-if="value.taskNumber">{{value.taskNumber}}</span>
              <img :src="value.taskNumber==0 ? 'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/loveciy/img/join/green.png' :'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/loveciy/img/join/red.png' "/>
            </span>
            <span class="firstTask">{{value.taskTitle}}</span>
            <img :src="value.dropImg" class="firstImg" />
          </div>
          <ul class="second"  :animation="value.animationData">
            <li v-for="(value2,index2) in value.taskList">
              <div class="secondTitle" @click="show(index,index2)">
                <span class="firstNumber secondNumber">
                  <img :src="value2.isFinish ? 'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/loveciy/img/join/green.png' :'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/loveciy/img/join/red.png' "/>
                </span>
                <span class="firstTask secondTask">{{value2.listTitle}}</span>
                <img :src="value2.dropImg" class="firstImg secondImg" />
              </div>
              <div class="secondShow" :animation="value2.animationData" v-if="value2.commitSuccess ? false : true">
                <div class="text-a" ref="textaa"><text class="uploadTitle text">{{value2.desc}}</text></div>
                <span class="upload1" v-for="(value4,index4) in value2.attachment_list" :data-link="value4.download_url" @click="download">{{value4.download_name}}</span>
                <input type="type" name="title" class="uploadInput" v-model.lazy="content" placeholder="请输入文字" />
                <ul class="uploadImg clearfix">
                  <li v-for="(value3,index3) in value2.addImg">
                   <img :src="value3.imgSrc" @click="add(value3.addTag,index,index2,value3.imgSrc)" class="uploadBtn"/>
                   <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/loveciy/img/error.png" class="error" @click="del(index,index2,value3.imgSrc,index3)" v-show="value3.addTag==1 ? false : true"/>
                  </li>
                </ul>
                <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/loveciy/img/join/commit.png" class="commitBtn" @click="commit(value2.id,index,index2)"/>
              </div>

              <div v-else :animation="value2.animationData" class="secondShow">
               <span class="finish">任务完成</span>
               <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/loveciy/img/join/returnWrite.png" class="returnWrite" @click="reset(index,index2)"/>
              </div>
            </li>
          </ul>
        </li>
      </ul>
      <img src="http://file.rzkeji.com/web/loveciy/img/footer.jpg" class="footer" mode="aspectFill"/>
  </div>
</template>
<script>
export default {
  data () {
    return {
      showData:[],   //shouData结尾
      imgId:[],
      content:"",
      commitSuccess:false
    }
  },
  methods:{
    download(e){
      var _this = this;
      wx.downloadFile({
        url:e.target.dataset.link,
        success(res){
          wx.saveFile({
            tempFilePath:res.tempFilePath,
            success(res){
              var savedFilePath = res.savedFilePath;
              console.log(savedFilePath);
              if(res.errMsg=='saveFile:ok')
              {
                wx.saveImageToPhotosAlbum({          
                  filePath: savedFilePath,          
                  success(res) {            
                    _this.$currency.showToast('下载成功','none')     
                  },          
                  fail(res) {            
                    _this.$currency.showToast('下载失败','none')        
                  }        
                })  
                _this.$currency.showToast('下载成功','none')
              }else{
                _this.$currency.showToast('下载失败','none')
              }
            }
          })
          //  var filePath = res.tempFilePath
          // wx.openDocument({
          //   filePath:filePath,
          //   success(res1){
          //     console.log(res1)
          //   },
          //   fail:function(err){
          //     console.log(err)
          //   }
          // })
        }
      })
    },
    reset(index,index2){   //点击重新编辑按钮触发
      this.showData[index].taskList[index2].commitSuccess=false;
    },
    show(index,index2){    //点击切换菜单
      this.content=""
      this.imgId=[]
      var animation = wx.createAnimation({
          duration: 200,
          timingFunction: 'linear',
      })
      var animation1 = wx.createAnimation({
          duration: 200,
          timingFunction: 'linear',
      })
      let showData=this.showData[index];
      let taskList=showData.taskList;
      var length=(taskList.length)*42+37+(taskList.length)*20;
      if(index2 =="first")    //这里是点击第一层的时候执行的     这里有个小bug  如果两个都展开后，点击第一个直接收起来的时候就会出现bug
      {
        if(showData.tag==1)
        {
        animation.height(length).step();
        [showData.tag,showData.dropImg]=['0','http://file.rzkeji.com/web/loveciy/img/join/pull.png']
        }else{
        animation.height(0).step();
        [showData.tag,showData.dropImg]=['1','http://file.rzkeji.com/web/loveciy/img/join/drop.png']
        }
        showData.animationData=animation.export()
      }else{               //这里是点击第二层的时候执行的
        if(taskList[index2].tag==1)
        {
          taskList.forEach((item,i) => {
            animation1.height(0).step()
            animation.height(length).step();
            [taskList[i].tag,taskList[i].dropImg]=['1','http://file.rzkeji.com/web/loveciy/img/join/drop.png']
            taskList[i].animationData=animation1.export()
            showData.animationData=animation.export()
          })
          
          // //获取text高度
          // let query = wx.createSelectorQuery();
          //   query.select('.textaa').boundingClientRect()
          //   query.exec(function (res) {
            // console.log(showData);
          // })

          var length=length+430;
          animation1.height(430).step() //这里因为上面那层已经固定高度了，然后这个需要增加上面的一层高度才能显示出来
          animation.height(length).step()
          taskList[index2].tag=0;
          taskList[index2].dropImg="http://file.rzkeji.com/web/loveciy/img/join/pull.png"
        }else{
          animation1.height(0).step();
          this.showData[index].taskList[index2].addImg=[];
          this.showData[index].taskList[index2].addImg.push({
            imgSrc:"http://file.rzkeji.com/web/loveciy/img/join/upload.png",
            addTag:1,     //这里当addTag=1的时候是可以添加照片，如果不是的话就是查看照片
           });
          animation.height(length).step();
          [taskList[index2].tag,taskList[index2].dropImg]=['1','http://file.rzkeji.com/web/loveciy/img/join/drop.png']
        }
          taskList[index2].animationData=animation1.export()
          showData.animationData=animation.export()
      }
    },
    add(addTag,index,index2,imgSrc){   //添加图片
      if(addTag==1){
        var _this=this;
        wx.chooseImage({
          count:1,
          sizeType:['original','compressed'],
          sourceType: ['album', 'camera'],
          success(res){
              wx.uploadFile({
                url:"https://zlz.loveciy.net/api/file/upload-img",
                filePath:res.tempFilePaths[0],
                name:"photo",
                header: {
                'content-type': 'application/json' // 默认值
                },
                success(res1){
                  console.log(res1)
                  if(_this.imgId.length<6)
                  {
                    _this.imgId.unshift(JSON.parse(res1.data).data.id);
                    _this.showData[index].taskList[index2].addImg.unshift({
                       imgSrc:res.tempFilePaths[0],
                       addTag:0
                     })
                  }else{
                    _this.$currency.showToast('最多上传6张照片','none')
                  }
                  
                }
              })
          }
        })
      }else{
        wx.previewImage({    //浏览照片
          current: imgSrc, // 当前显示图片的http链接
          urls: [imgSrc] // 需要预览的图片http链接列表
        })
      }
    },
    del(index,index2,imgSrc,index3){   //删除图片
      this.removeByValue(this.showData[index].taskList[index2].addImg,imgSrc)
      this.imgId.splice(index3,1)
    },
    removeByValue(arr, val) {      //这个是用于删除指定数组的元素
      for(var i=0; i<arr.length; i++) {  
          if(arr[i].imgSrc == val) {  
          arr.splice(i, 1);  
          break;  
        }
      }  
    },
    commit(id,index,index2){      //点击提交按钮触发
      var _this=this;
      var userToken=wx.getStorageSync('userToken')
      _this.$request.postData("https://zlz.loveciy.net/api/task/send-task-day-reback",{user_token:userToken,img_ids:_this.imgId,content:_this.content,td_id:id}).then(res =>{
           this.showData[index].taskList[index2].commitSuccess=true;
           this.showData[index].taskList[index2].isFinish=true;
      })
    }
  },
  created () {
   var _this=this;
   var userToken=wx.getStorageSync('userToken')
   _this.$request.getData("https://zlz.loveciy.net/api/task/get-task-day",{user_token:userToken}).then(res =>{
    _this.$store.dispatch('setNotice',res.data.notice)
    var res=res.data.data;
    for(let [index1,value1] of res.entries()){
       _this.showData.push({
        tag:1,
        animationData:{},
        taskTitle:value1.name,
        taskNumber:value1.no_set_count,
        dropImg:"http://file.rzkeji.com/web/loveciy/img/join/drop.png",
        ceng:0,
        taskList:[]
       })
      for(let [index2,value2] of value1.task_list.entries()){
        _this.showData[index1].taskList.push({
          listTitle:value2.title,
          listNumber:"",
          animationData:{},
          tag:1,
          dropImg:"http://file.rzkeji.com/web/loveciy/img/join/drop.png",
          addImg:[
           {
            imgSrc:"http://file.rzkeji.com/web/loveciy/img/join/upload.png",
            addTag:1,     //这里当addTag=1的时候是可以添加照片，如果不是的话就是查看照片
           },
          ],
          attachment_list:value2.attachment_list,
          id:value2.id,
          commitSuccess:value2.is_set,
          isFinish:value2.is_set,
          desc:value2.desc != null ? value2.desc : "无描述"
        })
      }//第二个for循环结束
    }//第一个for循环结束
   })
  }
}
</script>

<style scoped>
.container{width: 100%;padding-bottom: 65px;}
.first{width: 100%;height: 100%;margin-top: 10px;}
.first>li{width: 100%;display: flex; flex-direction: column;background: #fff;margin-top: 5px;font-size: 14px;border:0.1px solid #cccccc;box-sizing:border-box;border-radius:10px;}
.title{width: 100%;height: 50px;display: flex;justify-content: row;text-align: center;line-height: 30px;border-bottom: 0.1px solid #999999;border-top:0px;border-radius:10px;}
.secondTitle .secondNumber{margin:0;width: 15px;height: 15px;margin-top: 8px}
.secondTitle .secondNumber img{width: 15px;height: 15px;}
.firstNumber{width: 20px;height: 20px;display: block;margin-left:7px;margin-top: 15px;position: relative; }
.firstNumber img{width: 20px;height: 20px;position: absolute;left: 0;top: 0;}
.firstNumber span{z-index: 99;position: absolute;left: 0;top:0;display: block;width: 20px;height: 20px;color: #fff;line-height:20px;}
.firstTask{width: 258px;height: 30px;display: block;margin-top: 10px;text-align: left;margin-left: 5px;}
.firstImg{width: 25px;height: 25px;display: block;margin-top: 12.5px;margin-left:40px;}
.second{width: 100%;height: 0px;overflow: hidden;}
.second>li{width: 92%;display: flex; flex-direction: column;margin-top: 20px;margin-left: 3%;border:3rpx solid #cccccc;box-sizing:border-box;padding-top: 5px;padding-left: 1%;padding-bottom: 5px;padding-right: 1%;border-radius: 10px;}
.secondTitle{width: 100%;height: 30px;display: flex;justify-content: row}
.secondShow{width: 100%;height: 0px;overflow: hidden;}
.secondImg{width: 25px;height: 25px;margin-top:3px;margin-left:19px;}

.secondTask{margin:0;margin-left: 10px;line-height: 30px;}
.secondShow span{display: block}
.uploadTitle{width: 94%;font-size: 12.5px;margin-bottom: 3px;margin-top: 20rpx;line-height: 47rpx}
.upload1{width:100%;height: 20px;font-size: 11px; color: #fe2d54;margin-left:17rpx;margin-top:20rpx;}
.upload2{width:100%;height: 30px;font-size: 16px; }
.uploadInput{width: 94%;height: 30px;line-height: 30px;border-radius: 5px;margin-left: 2%;border:0.1px solid #cccccc;padding-left: 2%;margin-top: 20rpx;}
.uploadBtn{width: 50px;height: 50px;}
.uploadImg{width: 94%;height: 120px;margin-left: 2%}
.uploadImg li{width: 50px;height: 50px;float: left;margin-left: 12px;margin-top: 9px;position: relative;}
.error{width: 15px;height: 15px;position: absolute;right: 0;top: 0;}
.commitBtn{width: 75px;height: 30px;margin:15px auto;display: block;margin-bottom:0px;
}
.finish{width: 100%;height: 30px;line-height: 30px;text-align: center;font-size: 18px;margin-top:110px;}
.returnWrite{width: 100px;height: 33px;margin:15px auto;display: block}
.footer{width: 100%;height: 36px;display: block;}
.text-a{
  padding-left: 15rpx;
  padding-right: 10rpx;
  margin-bottom: 3px;margin-top: 20rpx;
}
</style>
